<template lang="html">
    <div
      class="x-bar"
      :id="chartId"
      :option='option'
      ></div>
</template>

<script>
import {formatNum} from '../../../util/tool'
export default {
  props : {
    chartId : {
      type : String,
    },
    title : {
      type : String,
    },
    options : {
      type : Object,
    }
  },
  data(){
    return {
      chart : '',
      option : {
          tooltip: {
              trigger: 'item',
              // formatter: "{b}: {c} ({d}%)"
              formatter : (param) => {
                let arr = [
                  param.name +':',
                  formatNum(param.value),
                  '('+param.percent+')'
                ];
                return arr.join('\n');
              }
          },
          legend: {
              orient: 'vertical',
              x: 'left',
              textStyle : {
                color:'#fff',
              },
              top : 20,
              left : 16,
              itemWidth : 16,
              itemHeight : 8,
              data:this.options.legend
          },
          series: [
              {
                  name:'案事件-警情',
                  type:'pie',
                  center : ['60%','48%'],
                  radius : ['0%','58%'],
                  startAngle : 160,
                  minAngle : 15,
                  avoidLabelOverlap: true,
                  itemStyle : {
                    emphasis: {
                    shadowBlur: 14,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  },
                  label: {
                      normal: {
                          // formatter : `{b|{b}}\n{c|{c}}`,
                          formatter : function(param){
                            let arr = [
                              '{b|' + param.name + '}',
                              '{c|' + formatNum(param.value) + '}',
                            ];
                            return arr.join('\n');
                          },
                          backgroundColor: '#13266d',
                          borderColor: '#0d68af',
                          borderWidth: 1,
                          borderRadius: 4,
                          padding : [2,8,4,8],
                          rich: {
                              b: {
                                  fontSize: 12,
                                  color :'#49d9fe',
                                  align :'center',
                                  lineHeight:20
                              },
                              c : {
                                color : '#ff9600',
                                fontSize : 12,
                                align :'center'
                              }
                          }
                      }
                  },
                  labelLine: {
                    length : 8,
                    length2 :12,
                    lineStyle : {
                      color: '#fff'
                    }
                  },
                  data:this.options.data
              }
          ],
          color : ['#f211eb','#00e6ff','#38c800','#ff7e00','#1d42ff','#f2f50d']
      }
    }
  },
  watch : {
    options: {
     handler(newVal, oldVal) {
      if (this.chart) {
       if (newVal) {
         this.option.legend.data = newVal.legend;
         this.option.series[0].data = newVal.data;
        this.chart.setOption(this.option);
       } else {
        this.chart.setOption(this.option);
       }
      } else {
        this.init();
      }
     },
     deep: true
  }
  },
  methods : {
    init() {
     this.chart = this.$echarts.init(document.getElementById(this.chartId));
     this.chart.setOption(this.option);
     window.addEventListener("resize", this.chart.resize);
   },
  },
  mounted(){
    this.init();
  }
}
</script>

<style lang="scss" scoped>
  .x-bar {
    width: 100%;
    height: 100%;
  }
</style>
